<template>
  <view class="product-edit">
    <view class="page-header">
      <text class="title">{{ isEdit ? '编辑商品' : '新增商品' }}</text>
    </view>

    <view class="form-content">
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-title">基本信息</view>
        <view class="form-item">
          <text class="label required">商品名称</text>
          <input 
            v-model="formData.name" 
            type="text" 
            placeholder="请输入商品名称"
            class="input"
          />
        </view>

        <view class="form-item">
          <text class="label required">商品分类</text>
          <view class="category-select">
            <picker 
              mode="selector" 
              :range="categories" 
              range-key="name"
              @change="handleCategoryChange"
            >
              <view class="picker-value">
                {{ selectedCategory?.name || '请选择商品分类' }}
              </view>
            </picker>
          </view>
        </view>

        <view class="form-item">
          <text class="label required">商品品牌</text>
          <view class="brand-select">
            <picker 
              mode="selector" 
              :range="brands" 
              range-key="name"
              @change="handleBrandChange"
            >
              <view class="picker-value">
                {{ selectedBrand?.name || '请选择商品品牌' }}
              </view>
            </picker>
          </view>
        </view>

        <view class="form-item">
          <text class="label">商品简介</text>
          <textarea 
            v-model="formData.introduction" 
            placeholder="请输入商品简介"
            class="textarea"
          />
        </view>
      </view>

      <!-- 商品图片 -->
      <view class="form-section">
        <view class="section-title">商品图片</view>
        <view class="form-item">
          <text class="label required">商品主图</text>
          <view class="image-uploader">
            <view 
              v-if="formData.picUrl" 
              class="image-preview"
              @click="handleUploadMainImage"
            >
              <image :src="formData.picUrl" mode="aspectFit" />
              <view class="image-actions">
                <text class="action-btn" @click.stop="handleRemoveMainImage">删除</text>
              </view>
            </view>
            <view 
              v-else 
              class="upload-btn"
              @click="handleUploadMainImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="label">商品轮播图</text>
          <view class="image-uploader multiple">
            <view 
              v-for="(url, index) in formData.sliderPicUrls" 
              :key="index"
              class="image-preview"
            >
              <image :src="url" mode="aspectFit" />
              <view class="image-actions">
                <text class="action-btn" @click="handleRemoveSliderImage(index)">删除</text>
              </view>
            </view>
            <view 
              v-if="formData.sliderPicUrls.length < 5"
              class="upload-btn"
              @click="handleUploadSliderImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 价格库存 -->
      <view class="form-section">
        <view class="section-title">价格库存</view>
        <view class="form-item">
          <text class="label required">销售价格</text>
          <input 
            v-model="formData.price" 
            type="digit" 
            placeholder="请输入销售价格"
            class="input"
          />
        </view>

        <view class="form-item">
          <text class="label">市场价格</text>
          <input 
            v-model="formData.marketPrice" 
            type="digit" 
            placeholder="请输入市场价格"
            class="input"
          />
        </view>

        <view class="form-item">
          <text class="label required">商品库存</text>
          <input 
            v-model="formData.stock" 
            type="number" 
            placeholder="请输入商品库存"
            class="input"
          />
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="form-actions">
        <button 
          type="primary" 
          class="save-btn"
          @click="handleSave"
        >
          保存
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { Spu } from '@/api/product/spu'
import type { CategoryVO } from '@/api/product/category'
import type { BrandVO } from '@/api/product/brand'

// 获取路由参数
const isEdit = ref(false)
const productId = ref<number>()

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const { id } = currentPage.$page?.options || {}
  if (id) {
    isEdit.value = true
    productId.value = Number(id)
    loadProductDetail()
  }
})

// 表单数据
const formData = ref<Partial<Spu>>({
  name: '',
  introduction: '',
  picUrl: '',
  sliderPicUrls: [],
  price: undefined,
  marketPrice: undefined,
  stock: undefined
})

// 模拟数据
const categories = ref<CategoryVO[]>([
  { id: 1, name: '电子产品', picUrl: '', sort: 1, status: 1 },
  { id: 2, name: '服装', picUrl: '', sort: 2, status: 1 }
])

const brands = ref<BrandVO[]>([
  { id: 1, name: '品牌1', picUrl: '', sort: 1, status: 1 },
  { id: 2, name: '品牌2', picUrl: '', sort: 2, status: 1 }
])

const selectedCategory = ref<CategoryVO>()
const selectedBrand = ref<BrandVO>()

// 加载商品详情
const loadProductDetail = async () => {
  // TODO: 实现加载商品详情的逻辑
  console.log('加载商品ID:', productId.value)
}

// 处理分类选择
const handleCategoryChange = (e: any) => {
  const index = e.detail.value
  selectedCategory.value = categories.value[index]
  formData.value.categoryId = selectedCategory.value.id
}

// 处理品牌选择
const handleBrandChange = (e: any) => {
  const index = e.detail.value
  selectedBrand.value = brands.value[index]
  formData.value.brandId = selectedBrand.value.id
}

// 处理主图上传
const handleUploadMainImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // TODO: 实现图片上传逻辑
      formData.value.picUrl = res.tempFilePaths[0]
    }
  })
}

// 处理主图删除
const handleRemoveMainImage = () => {
  formData.value.picUrl = ''
}

// 处理轮播图上传
const handleUploadSliderImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // TODO: 实现图片上传逻辑
      formData.value.sliderPicUrls = [
        ...(formData.value.sliderPicUrls || []),
        res.tempFilePaths[0]
      ]
    }
  })
}

// 处理轮播图删除
const handleRemoveSliderImage = (index: number) => {
  formData.value.sliderPicUrls = formData.value.sliderPicUrls?.filter((_, i) => i !== index)
}

// 保存商品
const handleSave = async () => {
  // TODO: 实现保存逻辑
  console.log('保存商品:', formData.value)
}
</script>

<style lang="scss">
.product-edit {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx;

  .page-header {
    background-color: #fff;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #dcdfe6;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #303133;
    }
  }

  .form-content {
    padding: 20rpx;

    .form-section {
      background-color: #fff;
      border-radius: 4rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .section-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #303133;
        margin-bottom: 20rpx;
        padding-left: 20rpx;
        border-left: 4rpx solid #409eff;
      }

      .form-item {
        margin-bottom: 30rpx;

        .label {
          display: block;
          margin-bottom: 10rpx;
          font-size: 28rpx;
          color: #606266;

          &.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4rpx;
          }
        }

        .input {
          width: 100%;
          height: 70rpx;
          border: 1px solid #dcdfe6;
          border-radius: 4rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
        }

        .textarea {
          width: 100%;
          height: 200rpx;
          border: 1px solid #dcdfe6;
          border-radius: 4rpx;
          padding: 20rpx;
          font-size: 28rpx;
        }

        .picker-value {
          width: 100%;
          height: 70rpx;
          line-height: 70rpx;
          border: 1px solid #dcdfe6;
          border-radius: 4rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #606266;
        }

        .image-uploader {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;

          &.multiple {
            .image-preview, .upload-btn {
              width: 200rpx;
              height: 200rpx;
            }
          }

          .image-preview {
            width: 300rpx;
            height: 300rpx;
            border: 1px solid #dcdfe6;
            border-radius: 4rpx;
            position: relative;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }

            .image-actions {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: rgba(0, 0, 0, 0.6);
              padding: 10rpx;
              display: flex;
              justify-content: center;

              .action-btn {
                color: #fff;
                font-size: 24rpx;
              }
            }
          }

          .upload-btn {
            width: 300rpx;
            height: 300rpx;
            border: 1px dashed #dcdfe6;
            border-radius: 4rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .upload-icon {
              font-size: 60rpx;
              color: #c0c4cc;
              margin-bottom: 10rpx;
            }

            .upload-text {
              font-size: 24rpx;
              color: #909399;
            }
          }
        }
      }
    }

    .form-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20rpx;
      box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);

      .save-btn {
        margin: 0;
      }
    }
  }
}
</style>